<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="营业员编码" prop="cashierCode">
        <el-input
          v-model="queryParams.cashierCode"
          placeholder="请输入营业员编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="POS机号" prop="deviceCode">
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入POS机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报表类型" prop="reportType">
        <el-select v-model="queryParams.reportType" placeholder="请选择报表类型" clearable>
          <el-option label="班报" value="SHIFT" />
          <el-option label="日报" value="DAILY" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" v-if="queryParams.reportType === 'SHIFT'">
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" v-if="queryParams.reportType === 'SHIFT'">
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报表日期" prop="reportDate" v-if="queryParams.reportType === 'DAILY'">
        <el-date-picker
          v-model="queryParams.reportDate"
          type="date"
          placeholder="选择报表日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" icon="el-icon-document" size="mini" @click="handleQuery">查询报表</el-button>
      </el-form-item>
    </el-form>

    <!-- 报表信息 -->
    <el-card class="box-card" v-if="reportData">
      <div slot="header" class="clearfix">
        <span>{{ reportData.reportType === 'SHIFT' ? '班报' : '日报' }}信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleExport">导出</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <label>生成时间：</label>
            <span>{{ parseTime(reportData.generateTime) }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <label>营业员：</label>
            <span>{{ reportData.cashierName }} ({{ reportData.cashierCode }})</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <label>POS机号：</label>
            <span>{{ reportData.deviceCode }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <label>总交易笔数：</label>
            <span>{{ reportData.totalTransactions }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <div class="info-item">
            <label>总交易金额：</label>
            <span style="color: #E6A23C; font-weight: bold;">¥{{ reportData.totalAmount }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <label>报表开始时间：</label>
            <span>{{ parseTime(reportData.reportStartTime) }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <label>报表结束时间：</label>
            <span>{{ parseTime(reportData.reportEndTime) }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 明细表格 -->
    <el-table v-loading="loading" :data="reportDetails" v-if="reportData">
      <el-table-column label="柜组号" align="center" prop="groupCode" width="100" />
      <el-table-column label="柜组名称" align="center" prop="groupName" width="120" />
      <el-table-column label="商品编码" align="center" prop="goodsCode" width="120" />
      <el-table-column label="商品名称" align="center" prop="goodsName" width="200" />
      <el-table-column label="数量" align="center" prop="quantity" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="unitPrice" width="100">
        <template slot-scope="scope">
          <span>¥{{ scope.row.unitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" align="center" prop="amount" width="120">
        <template slot-scope="scope">
          <span style="color: #E6A23C; font-weight: bold;">¥{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易时间" align="center" prop="transactionTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易流水号" align="center" prop="transactionNo" width="150" />
      <el-table-column label="交易类型" align="center" prop="transactionType" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.transactionType === '1' ? 'success' : 'warning'">
            {{ scope.row.transactionType === '1' ? '销售' : '退货' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getShiftReport, getDailyReport } from "@/api/pos/shift";

export default {
  name: "ShiftReport",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报表数据
      reportData: null,
      // 报表明细数据
      reportDetails: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cashierCode: null,
        deviceCode: null,
        reportType: 'SHIFT',
        startTime: null,
        endTime: null,
        reportDate: null
      }
    };
  },
  created() {
    // 设置默认时间
    this.setDefaultTime();
  },
  methods: {
    /** 设置默认时间 */
    setDefaultTime() {
      const now = new Date();
      const today = this.parseTime(now, '{y}-{m}-{d}');
      
      if (this.queryParams.reportType === 'DAILY') {
        this.queryParams.reportDate = today;
      } else {
        // 班报默认查询今天
        this.queryParams.startTime = today + ' 00:00:00';
        this.queryParams.endTime = today + ' 23:59:59';
      }
    },
    /** 查询报表 */
    getList() {
      if (!this.queryParams.cashierCode || !this.queryParams.deviceCode) {
        this.$modal.msgWarning("请先输入营业员编码和POS机号");
        return;
      }

      this.loading = true;
      
      if (this.queryParams.reportType === 'SHIFT') {
        getShiftReport(
          this.queryParams.cashierCode,
          this.queryParams.deviceCode,
          this.queryParams.startTime,
          this.queryParams.endTime
        ).then(response => {
          this.reportData = response.data;
          this.reportDetails = response.data.details || [];
          this.total = this.reportDetails.length;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      } else {
        getDailyReport(
          this.queryParams.cashierCode,
          this.queryParams.deviceCode,
          this.queryParams.reportDate
        ).then(response => {
          this.reportData = response.data;
          this.reportDetails = response.data.details || [];
          this.total = this.reportDetails.length;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.setDefaultTime();
      this.reportData = null;
      this.reportDetails = [];
      this.total = 0;
    },
    /** 导出报表 */
    handleExport() {
      if (!this.reportData) {
        this.$modal.msgWarning("请先生成报表");
        return;
      }
      
      // 这里可以实现导出功能
      this.$modal.msgSuccess("导出功能待实现");
    }
  }
};
</script>

<style scoped>
.info-item {
  margin-bottom: 10px;
}

.info-item label {
  font-weight: bold;
  color: #606266;
}

.box-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
